class Cart{
    constructor() {
        this.list = JSON.parse(localStorage.getItem('cart')) || []
        this.group1 = document.querySelector('.cart_grou')
        this.main = document.querySelector('.main-con')
        this.allcheckbox = document.querySelector('.allcheckbox')
        this.money = document.querySelector('.allprice')
        this.init()
    }
    init(){
        this.render()
        this.bindHtml()
        this.total()
    }
    render(){
        if(!this.list.length){
            this.group1.innerHTML = `
                    <h3 style='font-size:30px;text-align:center;padding-top:162px'>亲，你的购物车还未添加商品!快去购物吧~ <a href="../index.html" style='color:red;'>Go</a></h3>
        `
        }else{
            this.group1.innerHTML = ''
            this.list.forEach(item=>{
                // console.log(item)
                this.group1.innerHTML += `
                    <div class="group2">
                        <div class="main">
                            <input type="checkbox" class="select" data-id="${item.goods_id}" ${item.is_select && "checked"}>
                            <div class="pic">
                                <a href="http://localhost:8888/html/details.html?id=${item.goods_id}">
                                    <img src="${item.img_small_logo}" alt="">
                                </a>
                            </div>
                            <div class="des">
                                <a href="http://localhost:8888/html/details.html?id=${item.goods_id}">${item.title}</a>
                                <span>${item.category}</span>
                                <span class="iconfont icon-xialajiantouxiao"></span>
                            </div>
                            <div class="price">￥${item.current_price}</div>
                            <div class="num">
                                <div>
                                    <b data-id=${item.goods_id} class="sub">-</b>
                                    <input type="text" value='${item.cart_number}'>
                                    <b data-id=${item.goods_id} class="add">+</b>
                                </div>
                            </div>
                            <div class="sum"">￥${(item.current_price*item.cart_number).toFixed(2)}</div>
                            <div class="caozuo">
                                <span>移入收藏夹</span>
                                <span data-id=${item.goods_id} class="del">删除</span>
                            </div>
                        </div>
                    </div>
                `
            })
        }
        localStorage.setItem('cart', JSON.stringify(this.list))
    }
    bindHtml(){
        this.main.onclick = (e)=>{
            let target = e.target || e.srcElement
            //全选功能
            if(target.className == 'allcheckbox'){
                let type = target.checked
                this.list.forEach(item=>{
                    item.is_select = type
                })
                this.render()
                this.total()
            }
            //单选功能
            if(target.className == 'select'){
                let id = target.dataset.id - 0
                //找到数组里面对应的数据修改数据的状态
                let goods = this.list.find(item=>{return item.goods_id == id})
                goods.is_select = !goods.is_select
                this.render()
                this.total()
            }
            //点击增加商品数量
            if(target.className == 'add'){
                let id = target.dataset.id - 0
                let goods = this.list.find(item=>{return item.goods_id == id})
                //注意点：这个地方工作中跟进商品库存决定，不能固定现在主要是为了方便调试代码
                if(goods.cart_number==10){
                    alert('亲，只能购买这么多哦!')
                    return false
                }
                goods.cart_number++
                this.render()
                this.total()
            }
            if(target.className == 'sub'){
                let id = target.dataset.id - 0
                let goods = this.list.find(item=>{return item.goods_id == id})
                //注意点：这个地方工作中跟进商品库存决定，不能固定现在主要是为了方便调试代码
                if(goods.cart_number==1){
                    return false
                }
                goods.cart_number--
                this.render()
                this.total()
            }
            //点击删除商品数量
            if(target.className == 'del'){
                let id = target.dataset.id - 0
                let index = this.list.findIndex(item=>{return item.goods_id == id})
                this.list.splice(index, 1)
                this.render()
                this.total()
                if(!this.list.length){
                    this.allcheckbox.checked = false
                }
                console.log(this.allcheckbox.checked)
            }
            //点击清空购物车
            if(target.className == 'dlAll'){
                //遍历数组，进行过滤
                let res = this.list.filter(item=>{
                    //把数据里面是没有选中状态的给过滤出来，剩余的就是选中的
                    return item.is_select == false
                })
                //重新赋值
                this.list = res
                this.render()
                this.total()
                if(!this.list.length){
                    this.allcheckbox.checked = false
                }
            }
            // this.count()
        }
    }
    total(){
        // console.log(this.money)
        let num = 0
        let price = 0
        this.list.forEach(item=>{
            //总价和总的数量必须是选中状态下才计算
            if(item.is_select == true){
                num += item.cart_number
                price += item.cart_number * item.current_price
                let res = this.list.every(item=>{return item.is_select == true})
                if(res){
                    this.allcheckbox.checked = true
                }else{
                    this.allcheckbox.checked = false
                }
            }
        })
        this.money.innerHTML = price.toFixed(2)
    }
}
new Cart()